<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2023-06-17 11:19:55
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-07-06 09:57:07
 * @FilePath: /com.huizhouyiren.web.d0101/src/components/addFriend/addFrend.vue
 * @Description:  聊天，加好友，发邮件按钮
-->
<script setup>
import { ref } from "vue"
import { useRouter } from "vue-router"
import mitt from "@/mitt/index"
import { addFriendsRequest } from "@/api/user"
import { useChat } from "@/stores/chat"

const chatStore = useChat()
const router = useRouter()

const props = defineProps({
    height: {
        type: String,
        default: '1rem'
    },
    type: {
        type: String,
        default: "message",
        validator(value) {
            return ['message', 'add', 'email'].includes(value)
        }
    },
    memberId: {
        type: Number,
        require: true
    },
    member: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

let loading = ref(false)
let show = ref(false)
let popconfirm = ref(null)
/**
 * @description: 添加好友
 * @return {*}
 */
const addFriends = () => {
    loading.value = true
    addFriendsRequest({
        member_id: props.memberId
    }).then(res => {
        let type = "error"
        if (res.code == 200) {
            type = 'success'
        }
        mitt.emit('messageTip', {
            type,
            msg: res.msg
        })
    }).finally(() => {
        loading.value = false
        show.value = false
    })
}
/**
 * @description: 聊天
 * @return {*}
 */
const goChat = () => {
    chatStore.updateChatUserInfo({
        ...props.member,
        member_id: props.member.id,
        to_mid: props.member.id
    })
    chatStore.updateChatFlag(true)
    router.push("/chat")
}

/**
 * @description: 写信
 * @return {*}
 */
const writeEmail = () => {
    router.push({
        path: "/email/write",
        query: {
            type: 'reply',
            uid: props.member.uid
        }
    })
}
</script>

<template>
    <div v-if="type == 'message'" style="width: 2.5rem;" @click="goChat"
        class="flex items-center justify-center px-2 py-1 border border-solid rounded cursor-pointer text-primary border-primary">
        <img src="../../assets/image/home/1.png" alt="" style="width: auto;" :style="{ height }">
    </div>
    <div v-if="type == 'add'" class="cursor-pointer">
        <n-popconfirm :show-icon="false" ref="popconfirm" :show="show">
            <template #trigger>
                <div style="width: 2.5rem;" @click="show = true"
                    class="flex items-center justify-center px-2 py-1 border border-solid rounded cursor-pointer text-orangeColor border-orangeColor">
                    <img src="../../assets/image/common/addfriend.png" alt="" style="width: auto;" :style="{ height }">
                </div>
            </template>
            <template #action>
                <div class="flex items-center">
                    <n-button size="small" @click="show = false">{{ $t('system.cancelText') }}</n-button>
                    <n-button size="small" type="primary" :loading="loading" @click="addFriends">{{ $t('system.confirmText')
                    }}</n-button>
                </div>
            </template>
            <div class="mx-2 my-3">
                {{ $t("system.sendApplyTip") }}
            </div>
        </n-popconfirm>
    </div>
    <div v-if="type == 'email'" style="width: 2.5rem;" @click="writeEmail"
        class="flex items-center justify-center px-2 py-1 border border-solid rounded cursor-pointer text-themeBlue border-themeBlue">
        <img src="../../assets/image/home/2.png" alt="" style="width:1.25rem;height: auto;">
    </div>
</template>